<template>
	<view>
		<tt-bar leftIcon="icon-back" title="报名活动" bgColor="#fed407" titleAlign="left"></tt-bar>
		<view class="content">					
			<view class="oldlist" v-for="(item,index) in cglist" :key="index">
				<view class="oldtop">
					<view class="oldtopleft" @tap="shop(item.storeId)">
						<text class="iconfont icon-shoucangdianjia"></text>
						<text class="" style="font-size: 26rpx;font-weight: 900;color: #000000;margin-left: 10rpx;">{{item.storeName}}</text>
					</view>
					<view class="oldtopright">
						<text style="font-size: 24rpx;color: red;font-weight: 700;" v-if="item.status==1">未付款</text>
						<text style="font-size: 24rpx;color: red;font-weight: 700;" v-if="item.status==2">待使用</text>
						<text style="font-size: 24rpx;color: red;font-weight: 700;" v-if="item.status==3">已使用</text>
						<text style="font-size: 24rpx;color: red;font-weight: 700;" v-if="item.status==4">退款中</text>
						<text style="font-size: 24rpx;color: red;font-weight: 700;" v-if="item.status==5">已退款</text>
						<text style="font-size: 24rpx;color: red;font-weight: 700;" v-if="item.status==6">已关闭</text>
					</view>
				</view>
				<view class="oldbottom">
					
					<button type="default"class="oldbtn"  @tap="orderDt(item.orderNo)">查看详情</button>
					
					
					<view class="contentold">
						<view class="imgbox" @tap="cgxiangqing(item.actUsualId,item.storeId)">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="wenziold" @tap="orderDt(item.orderNo)">
							<view class="title">
								<text>{{item.name}}</text>
							</view>
							<view class="nav">
								<text>￥{{item.paymentPrice}}</text>
							</view>
						</view>
					</view>
				</view>								
			</view>
			

		</view>
		<block v-if="cglist.length<1">
			<empty-box></empty-box>
		</block>
	</view>
</template>

<script>
	import COMM from '@/common/common.js';
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		computed: {
					...mapState({
						userInfo: state => state.user.userInfo,
						isLogin: state => state.user.isLogin,
						
						
					})
				},
		data() {
			return {
				cglist:[]
			}
		},
		methods: {
			orderDt(orderNo){
				this.toPage({
					url:"orderDtCg",
					id:orderNo
				})
			},
			cgxiangqing(id,storeId){
				this.toPage({
					url:'cgxiangqing',
					id:id,
					storeId:storeId
				})
			},
			shop(storeId){
				// uni.redirectTo({
				//     url: '../../pagesA/shopDetail/shopDetail?id=' + this.storeId
				// });
				this.toPage({
					url:'shopDetail',
					id:storeId
				})
			},
			myEnterFor(){
				this.$store
					.dispatch('myEnterFor', {
						userId:this.userInfo.userId
					})
					.then(res => {
						// console.log(res.data.date);
						this.cglist = res.data.date
																		
					});
				
			}
				
		
		},
		onShow() {
			this.myEnterFor()
		},
		onLoad() {
			this.myEnterFor()
		},
		onPullDownRefresh() {
			this.myEnterFor()
			setTimeout(() => {				
				uni.stopPullDownRefresh();				
			}, 1500)
		}
	}
</script>

<style lang="less">
body{
	background-color: #ffffff;
	box-sizing: border-box;
}

.content{
	padding: 40rpx;
	.oldlist{
		width: 100%;
		// height: 340rpx;
		box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
		border-radius: 10rpx;
		padding:0 20rpx;
		margin-bottom: 20rpx;
		.oldtop{
			width: 100%;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.oldbottom{
			width: 100%;
			height: 190rpx;
			position: relative;
			
			
			.oldbtn{
				position: absolute;
				bottom: 20rpx;
				right: 0;
				background-color: #f9ae00;
				width: 180rpx;
				height: 65rpx;
				border-radius: 33rpx;
				text-align: center;
				line-height: 65rpx;
				font-size: 28rpx;
				color: #fff;
			}
			.contentold{
				display: flex;
				height: 100%;
				
				.imgbox{
					display: flex;
					align-items: center;
					width: 215rpx;
					height: 100%;
					image{
						width: 215rpx;
						height: 121rpx;
						border-radius: 8rpx;
					}
				}
				.wenziold{
					font-size: 24rpx;
					color: #ccc;
					margin-left: 15rpx;
					padding-top: 30rpx;
					.title{
						font-size: 25rpx;
						color: #000;
						width: 400rpx;												
						font-weight: 900;
						margin-bottom: 10rpx;
					}
					.nav{
						margin-bottom: 5rpx;
						color: red;
					}
				}
			}
			
		}
	}
}
</style>
